<template>
  <div>
    <!--<transition name="fade">-->
      <div class="bottomShow" :class="{'addbottomShow' : showBottom}" >
        <i @click="goTop" class="iconTop"></i>
        <a v-show="false" @click="downApp" class="appLink" href="javascript:void(0)">
          <span class="appicon"></span>
          <span class="text">打开App</span>
        </a>
      </div>
    <!--</transition>-->
  </div>
</template>
<script>
export default{
  props:{
    showBottom:{
      type:Boolean,
      default:false
    }
  },
  methods:{
    goTop(){
    //  document.documentElement.scrollTop=0;//pc 上有效果；
     // document.body.scrollTop=0;//手机上有效果；
      if (this.showBottom) {
        //document.documentElement.scrollTop = 0;
        this.gotoTop(4);
      }
    },
    //平滑返回顶部
    gotoTop(rate) {

      if (!window.requestAnimationFrame) {
        requestAnimationFrame = function (fn) {
          setTimeout(fn, 17);
        };
      }

      let doc = document.body.scrollTop ? document.body : document.documentElement;
      let scrollTop = doc.scrollTop;
      let top = function () {
        scrollTop = scrollTop + (0 - scrollTop) / (rate || 2);
        if (scrollTop < 1) {
          doc.scrollTop = 0;
          return false;
        }
        doc.scrollTop = scrollTop;
        stop = requestAnimationFrame(top);
      };
      top();
    },
    downApp(){

    }
  }
}
</script>
<style lang="less" scoped>
  .bottomShow{
    position: fixed;
    bottom: -121px;
    right: 14px;
    width: 60px;
    text-align: center;
    z-index: 1;
    transition: all 1.5s;
    &.addbottomShow{
      //transform: translateY(-180px);
      transform: translateY(-220px)
    }
    /*transform: translate3d(0, -180px, 0);*/
    /*&.fade-enter-active, &.fade-leave-active{*/
      /*transition: all 1.5s*/
    /*}*/

    /*&.fade-enter, &.fade-leave-active{*/
      /*transform: translate3d(0, 0, 0)*/
    /*}*/
    .iconTop{
      display: inline-block;
      width: 36px;
      height: 35px;
      background-position: -166px -74px;
      vertical-align: middle;
      background-image: url(https://appimg.huim.com/mimg/m_ico.png);
      background-repeat: no-repeat;
      background-size: 201.5px auto;
    }
    .appLink{
      width: 58px;
      height: 68px;
      text-align: center;
      margin-top: 15px;
      display: inline-block;
      vertical-align: middle;

      .appicon{
        display: inline-block;
        width:45px;
        height:45px;
        background: url(../../../static/img/app_logo.png) no-repeat top center;
        background-size:100% 100%;
      }
      .text{
        position:absolute;
        bottom: 0;
        left: 0;
        display: inline-block;
        width: 100%;
        text-align:center;
        color:#fff;
        background: @red;
        border-radius:10px;
        vertical-align: baseline;
        height: 18px;
        line-height:18px;
      }
    }
  }
</style>
